<h2>Personal Contact</h2>

<form id ="filter">
  <label>Filter Name</label>
  <input type="text" [(ngModel)]="term" name="filter">
</form>

<ul id="person-listing">
  <li *ngFor="let person of people | filter:term">
    <div class="single-person">
      <span [ngStyle]="{background:person.color}">{{person.color}}</span>
      <h3>{{person.name}}</h3>
      <h3>{{person.phone}}</h3>
    </div>
  </li>
</ul>

<!--添加数据的表单-->
<form id="add-person">
  <input type="text" [(ngModel)]="name" name="name">
  <input type="text" [(ngModel)]="color" name="color">
  <input type="text" [(ngModel)]="phone" name="phone">
  <button (click)="fbPostData(name,color,phone)">Add Item</button>
</form>
